<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">

    <title>验证码</title>
    <style>
        #inputCaptcha {
            height: 30px;
            vertical-align: middle;
        }

        #verificationCodeImg {
            vertical-align: middle;
        }

        #checkCaptcha {
            height: 40px;
            width: 100px;
        }
    </style>
</head>

<body>
<h1>输入验证码</h1>
<div id="confirm">
    <input type="text" name="inputCaptcha" id="inputCaptcha">
<!--    src也可以写后端的地址
cursor:pointer是网页浏览时用户指针的样式或图形形状，crosschair:光标为十字线条，pointer:光标为一只手-->
    <img id="verificationCodeImg" src="/admin/captcha" style="cursor: pointer;" title="看不清？换一张" />
    <input type="button" value="提交" id="checkCaptcha">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
    $(function () {
        $("#verificationCodeImg").click(function () {
            //目的：重新获取请求
            /*get与post的区别
            get:通常查询字符串在url上（不是绝对），通常支持幂等（无论什么，拿到的通常相等，有可能进行缓存，第一次缓存后面就不去请求了，因为已经缓存了，所以最好加上一个时间戳）
            post:通常查询字符串在请求正文上（不是绝对）
            */
            $(this).hide().attr('src', '/admin/captcha?dt=' + new Date().getTime()).fadeIn();
            // $(this).attr('src', '/admin/captcha?dt=' + new Date().getTime());
        });

        $("#checkCaptcha").click(function () {
            $.ajax({
                // type: "get",
                // url: "/admin/check",
                // data: {
                //     captcha: $("#inputCaptcha").val()
                // },
                // success: function (result) {
                //     if (result) {
                //         location.href = "success.html";
                //         // location.assign("success.html");
                //     } else {
                //         alert("验证码错误");
                //     }
                type:"get",
                url:"/admin/check",
                data:{
                    captcha: $("#inputCaptcha").val()
                },
                success:function (result){
                    if(result){
                        location.href="success.html";
                    }else{
                        alert("验证码错误");
                    }
                }
            });
        });
    });


</script>
</body>
</html>